<template>
  <div class="box">
      <div class="top"><span>精选专题 ></span></div>
      <div class="container">
          <div class="container-item" 
          v-for="(item,index) in subjectList" 
          :key="index" 
          @click="goSubject(item)">
            <div class="container-item-goods">
                  <img :src="item.pic">
              <p v-html="item.title" class="p1">{{item.title}}</p>
              <p class="p2">{{item.descript}}</p>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    computed:{
        subjectList:function(){
            return this.$store.state.homeStore.subjectList
        }
    },
    mounted(){
        this.$store.dispatch("getSubjectList")
    },
    methods:{
        goSubject(item){
            this.$store.dispatch("getSubjectDetails",item.id)
            this.$router.push({
                path:"/zhuanlan"
            })
        }
    }
}
</script>

<style scoped>
.box{
    background-color: #fff!important;
}
.top{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.65rem;
    text-align: center;
}
.top span{
    margin: 0 auto;
    font-size: 0.3rem;
}
    .container{
        width: 100%;
        height: 3.9rem;
        overflow: scroll;
        display: flex;
    }
    .container-item{
        width: 22.7rem;
    }
    .container-item-goods{
        width: 4.42rem;
        height: 2.84rem;
        margin-left: .12rem;
    }
    img{
    width: 4.42rem;
    height: 2.84rem;
    display: block;
    border-radius: 0.06rem;
    }
    .p1{
        font-size: 0.2rem;
    }
    .p2{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:1;
        overflow: hidden;
       color: #B2B2B2;
       font-size:0.21rem;
    }
</style>